var clock1 = document.querySelectorAll('.clock')[0];
var clock2 = document.querySelectorAll('.clock')[1];
var point = 1;
var span = '';
//设置随机数
var dis = document.querySelectorAll('.square');

span += `<p>第<span>${point}</span>关</p>`;
$('.left').html(span);

//封面隐藏
$('button').on('click', function () {
	$('.Starts').hide();
	timerStart();
})

//封面显示后,按钮显示
$('.btn2').css({
	'display': 'block'
})

//游戏开始前,让结束封面隐藏
$('.End').css({
	'display': 'none'
});

//设置重新开始按钮
var btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function () {
	$('.End').css({
		'display': 'none'
	})
})

// //设置定时器
function timerStart() {
	//游戏初始时间
	var timer = 80;
	//每过1s timer-1
	clock = setInterval(function () {
		timer--;
		var timerString = String(timer);
		//当倒计时<10的时候，十位应该补0
		if (timer < 10) {
			timerString = "0".concat(timerString);
		}

		var game = document.querySelector('#Game');

		clock1.innerHTML = timerString.substr(0, 1);
		clock2.innerHTML = timerString.substr(1, 2);
		if (timer < 0) {

			//添加一个end类名,存放游戏结束界面
			document.querySelector('.End').classList.add('end');
			$('.End').css({
				'display': 'block'
			});

		}

	}, 1000);
}


//时间结束后,清除定时器
function tingzhi() {
	clearInterval(clock);
}

//执行timerStart函数
//设置随机颜色
//填写颜色
//使用for遍历
var Divs = document.querySelectorAll('.square');
var colors = ['red', 'yellow', 'green', 'puple', 'orange', 'pink', 'Olive', 'gray'];
console.log(colors)
for (var i = 0; i < Divs.length; i++) {
	var random = Math.floor(Math.random() * colors.length);
	Divs[i].style.backgroundColor = colors[random];
}



// 渲染键盘
function keyboard() {
	var keyboard = [];
	for (var i = 0; i < 18; i++) {
		// if (i < res.length) {
		// 	a = res[i]
		// } else {
		// 	a = Math.floor(Math.random() * 10)
		// }
		if (i < res.length) {
			keyboard.push(res[i]);
		} else {
			var a = Math.floor(Math.random() * 10);
			keyboard.splice(a, 0, a);
		}
	}

	//打乱顺序
	keyboard.sort(function () {
		return 0.5 - Math.random()
	})

	console.log(keyboard);
	var arr18 = document.querySelectorAll('.square');
	//将随机数渲染到键盘上
	for (let index = 0; index < keyboard.length; index++) {
		arr18[index].innerHTML = keyboard[index];
	}
}

//为用户生成指定的数字
var small = document.querySelector('ul');
// var res = [Math.floor(Math.random() * 9)];
var res = [];

function arr() {
	res = [];
	var html = '';
	for (var i = 0; i < point;) {
		var s = Math.floor(Math.random() * 9);
		// console.log(i);
		if (res.indexOf(s) < 0) {
			res.splice(i, 0, s);
			i++;
			html += `
			<li style = float:left>${s},</li>
			`
		}
	}
	small.innerHTML = html;
}

// 点击颜色块事件
var index = 0;
var temArr = [];
$('#Game').on('click', '.square', function () {
	var num = $(this).text();
	if (temArr[temArr.length - 1] == res[temArr.length - 1]) {
		if (num == res[index]) {
			$('square').addClass('active');
			index++;
		} else {
			$('.End').css({
				'display': 'block'
			});
			tingzhi();
			alert('游戏结束');
			point = 1;
			init();
			$('.left').html(`<p>第<span>${point}</span>关</p>`);
		}
		//如果下标的长度等于颜色的数字,那么就通关
		if (index == res.length) {
			point++;
			init();
			index = 0; // 重置
			$('.left').html(`<p>第<span>${point}</span>关</p>`);
			//重新渲染颜色
			var Divs = document.querySelectorAll('.square');
			var colors = ['red', 'purple', 'green', 'puple', 'orange', 'pink', 'Olive', 'gray'];
			// console.log(colors)
			for (var i = 0; i < Divs.length; i++) {
				var random = Math.floor(Math.random() * colors.length);
				Divs[i].style.backgroundColor = colors[random];
			}
		}
	}
})

// 初始化函数
function init() {
	arr();
	keyboard();
}

init();


/**
 *  疑问点(坑点)
 *
 * 代码量过于大
 *   bug过多,稳定性很差
 *
 * 写项目时,思路不够明确
 * */